<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="application/json, text/plain, */*; charset=utf-8" />
    <meta http-equiv="Accept" content="application/json, text/plain, */*" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.css" />
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css" />
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.no-icons.min.css" />

    <title>PAgination example</title>
</head>

<body data-ng-app="myModule">
    <div data-ng-controller="ctrlRead">
            <pre>pagedItems.length: {{pagedItems.length|json}}</pre>
            <pre>currentPage: {{currentPage|json}}</pre>
            <pre>currentPage: {{sort|json}}</pre>

        <table class="table table-striped table-condensed table-hover">
            <thead>

                <tr>
                    <th class="id" data-custom-sort data-order="'id'" data-sort="sort">Id&nbsp;</th>
                    <th class="name" data-custom-sort data-order="'name'" data-sort="sort">Name&nbsp;</th>
                    <th class="description" data-custom-sort order="'description'" sort="sort">Description&nbsp;</th>
                    <th class="field3" data-custom-sort order="'field3'" sort="sort">Field 3&nbsp;</th>
                    <th class="field4" data-custom-sort order="'field4'" sort="sort">Field 4&nbsp;</th>
                    <th class="field5" data-custom-sort order="'field5'" sort="sort">Field 5&nbsp;</th>
                </tr>
            </thead>
            <tfoot>
                <td colspan="6">
                    <div class="pagination pull-right">
                        <ul>
                            <li data-ng-class="{disabled: currentPage == 0}">
                                <a href="#" data-ng-click="prevPage()">« Prev</a>
                            </li>

                            <li data-ng-repeat="n in range(pagedItems.length, currentPage, currentPage + gap) " data-ng-class="{active: n == currentPage}" data-ng-click="setPage()">
                                <a href="#" data-ng-bind="n + 1">1</a>
                            </li>

                            <li data-ng-class="{disabled: (currentPage) == pagedItems.length - 1}">
                                <a href="#" data-ng-click="nextPage()">Next »</a>
                            </li>
                        </ul>
                    </div>
                </td>
            </tfoot>
            <tbody>
                <tr data-ng-repeat="item in pagedItems[currentPage] | orderBy:sort.sortingOrder:sort.reverse">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.description}}</td>
                    <td>{{item.field3}}</td>
                    <td>{{item.field4}}</td>
                    <td>{{item.field5}}</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script src="http://code.jquery.com/jquery-2.1.1.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.js"></script> 
    <script src="https://code.angularjs.org/1.2.21/angular.js" type="text/javascript"></script>
    <script src="https://code.angularjs.org/1.2.21/angular-resource.js" type="text/javascript"></script>
    <script src="js/pagination.js" type="text/javascript"></script>
</body>

</html>